<template>
  <view class="container">
    <canvas :canvas-id="canvasId" style="width: 300px; height: 300px"></canvas>
    <button class="spin-button" @click="startSpin"></button>
    <a :href="baseData.aircraftUrl" target="_blank"> <img class="telegram-fixed-icon" src="@/static/teltgram.png" /></a>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()
const baseData = reactive({
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
})
const canvasId = 'wheelCanvas'
const canvasWidth = 300
const canvasHeight = 300
const isSpinning = ref(false)

const prizes = ['1', '2', '3', '4', '5', '6', '7']
const rotationAngle = ref(0)
const spinDuration = 6000 


const easeInOutQuad = (t) => {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
}

const drawWheel = (ctx, currentAngle = 0) => {
  const numPrizes = prizes.length
  const anglePerPrize = (2 * Math.PI) / numPrizes

  ctx.clearRect(0, 0, canvasWidth, canvasHeight)
  ctx.save()
  ctx.translate(canvasWidth / 2, canvasHeight / 2)
  ctx.rotate((currentAngle * Math.PI) / 180)

  prizes.forEach((prize, index) => {
    const startAngle = index * anglePerPrize
    const endAngle = startAngle + anglePerPrize

    
    ctx.beginPath()
    ctx.moveTo(0, 0)
    ctx.arc(0, 0, canvasWidth / 2, startAngle, endAngle)
    ctx.closePath()
    ctx.setFillStyle(index % 2 === 0 ? '#FFD700' : '#FF6347')
    ctx.fill()

    
    ctx.save()
    ctx.rotate(startAngle + anglePerPrize / 2)
    ctx.setFillStyle('#000')
    ctx.setFontSize(14)
    ctx.fillText(prize, canvasWidth / 4, 0) 
    ctx.restore()
  })

  ctx.restore()
  ctx.draw() 
}

const drawPointer = () => {
  const ctx = uni.createCanvasContext(canvasId)
  ctx.beginPath()
  
  ctx.moveTo(canvasWidth, canvasHeight / 2)
  ctx.lineTo(canvasWidth - 30, canvasHeight / 2 - 10)
  ctx.lineTo(canvasWidth - 30, canvasHeight / 2 + 10)
  ctx.closePath()
  ctx.setFillStyle('#FF0000')
  ctx.fill()
  ctx.draw(true) 
}

const startSpin = () => {
  if (isSpinning.value) return

  isSpinning.value = true
  const randomRotation = Math.floor(Math.random() * 360) + 3600 
  const finalRotation = rotationAngle.value + randomRotation

  animateSpin(rotationAngle.value, finalRotation, spinDuration)
}

const animateSpin = (startAngle, endAngle, duration) => {
  const startTime = Date.now()
  const animate = () => {
    const elapsed = Date.now() - startTime
    const progress = Math.min(elapsed / duration, 1)
    const easedProgress = easeInOutQuad(progress)
    const currentAngle = startAngle + (endAngle - startAngle) * easedProgress

    rotationAngle.value = currentAngle % 360

    const ctx = uni.createCanvasContext(canvasId)
    drawWheel(ctx, rotationAngle.value)
    drawPointer()

    if (progress < 1) {
      requestAnimationFrame(animate)
    } else {
      isSpinning.value = false
      showResult(rotationAngle.value)
    }
  }
  animate()
}

const showResult = (finalAngle) => {
  const numPrizes = prizes.length
  const anglePerPrize = 360 / numPrizes
  
  const adjustedAngle = (360 - finalAngle) % 360
  const prizeIndex = Math.floor(adjustedAngle / anglePerPrize) % numPrizes
  const prize = prizes[prizeIndex]

  uni.showToast({
    title: `：${prize}`,
    icon: 'none',
  })
}

onMounted(() => {
  
  uni.setNavigationBarTitle({
    title: 'Studio !' + t('Earn money so easy') + '!', 
  })
  const ctx = uni.createCanvasContext(canvasId)
  drawWheel(ctx)
  drawPointer()
})
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  position: relative;
}

.spin-button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>